<template>
  <div class="layout" id="index">
    <nav class="slider">
      <mu-list :value="activeSlider" @change="changeActiveSlider">
        <mu-list-item title="主页" value="HomeIndex" to="/">
          <mu-icon slot="left" value="home"/>
        </mu-list-item>
        <mu-list-item title="文章" value="ArticleIndex" to="article">
          <mu-icon slot="left" value="archives"/>
        </mu-list-item>
        <mu-list-item title="标签" value="LabelIndex" to="label">
          <mu-icon slot="left" value="android"/>
        </mu-list-item>
      </mu-list>
    </nav>
    <section class="main">
      <header class="header">
        <div class="logo">Defore的博客</div>
        <div class="nav">
          <mu-tabs :value="activeTab" @change="changeActiveTab" class="tabs">
            <mu-tab value="tab1" title="选项一" />
            <mu-tab value="tab2" title="选项二" />
            <mu-tab value="tab3" title="选项三" />
          </mu-tabs>
        </div>
      </header>
      <section class="content">
        <router-view />
      </section>
      <footer class="footer">
        Defore的主页 ©2017 Created by Defore
      </footer>
    </section>
  </div>
</template>
<script>

export default {
  name: "index",
  data: () => ({
    activeTab: 'tab1',
    activeSlider: ''
  }),
  methods: {
    changeActiveTab (val) {
      this.activeTab = val
    },
    initActiveSlider () {
      this.activeSlider = this.$route.name
    },
    changeActiveSlider (val) {
      this.activeSlider = val
    }
  },
  created () {
    this.initActiveSlider()
  }
}
</script>
<style lang="scss" scoped>
@import '../assets/default.scss';
.layout {
  width: 100%;
  background-color: rgb(236, 236, 236);
  overflow: hidden;
}
.slider {
  width: 200px;
  float: left;
}
.main {
  width: calc(100% - 200px);
  float: left;
  .header {
    background-color: $blue;
    .logo {
      font-size: 24px;
      color: #fff;
      padding: 10px 20px;
      display: inline-block;
    }
    .nav {
      display: inline-block;
      width: calc(100% -150px);
      margin: 0 auto;
      .tabs {
        margin: 0 auto;
        width: 400px;
        background-color: rgba(0, 0, 0, 0);
      }
    }
  }
  .footer {
    padding: 20px 0;
    text-align: center;
  }
}
</style>
